import useHotKey from "@/hooks/useHotKey";
import { GlobalDataProps } from "@/store";
import { useStore } from "vuex";
import { computed } from "vue";
import { HotkeysEvent, KeyHandler } from "hotkeys-js";
import DataOperation from "./dataOperations";
const wrap = (callback: KeyHandler) => {
  const wrapperFn = (e: KeyboardEvent, event: HotkeysEvent) => {
    e.preventDefault();
    callback(e, event);
  };
  return wrapperFn;
};

function useHotKeyExtra(command: string, callback: KeyHandler) {
  useHotKey(command, (event, keyEvent) => {
    const tagName = (event.target as HTMLElement).tagName;
    const isInput = tagName === "TEXTAREA" || tagName === "INPUT";
    if (!isInput) {
      event.preventDefault();
      callback(event, keyEvent);
    }
  });
}

export default function initHotKeys() {
  console.log("initHotKeys");

  const store = useStore<GlobalDataProps>();
  const currentId = computed(() => store.state.editor.currentElement);

  // useHotKey('ctrl+c',()=>{
  //     store.commit('copyComponent',currentId.value)
  // });
  // useHotKey('ctrl+v',()=>{
  //     store.commit('pasteComponent')
  // });
  // useHotKey('backspace,delete',()=>{
  //     store.commit('deleteComponent',currentId.value)
  // })
  // useHotKey('esc',()=>{
  //     store.commit('setActive','')
  // })

  // useHotKey('up',wrap(()=>{
  //     store.commit('moveComponent',{ direction: 'up', amount: 1,  id: currentId.value })
  // }))
  // useHotKey('left',wrap(()=>{
  //     store.commit('moveComponent',{ direction: 'left', amount: 1,  id: currentId.value })
  // }))
  // useHotKey('right',wrap(()=>{
  //     store.commit('moveComponent',{ direction: 'right', amount: 1,  id: currentId.value })
  // }))
  // useHotKey('down',wrap(()=>{
  //     store.commit('moveComponent',{ direction: 'down', amount: 1,  id: currentId.value })
  // }))

  // useHotKey('shift+up',()=>{
  //     store.commit('moveComponent',{ direction: 'up', amount: 10,  id: currentId.value })
  // })
  // useHotKey('shift+left',()=>{
  //     store.commit('moveComponent',{ direction: 'left', amount: 10,  id: currentId.value })
  // })
  // useHotKey('shift+right',()=>{
  //     store.commit('moveComponent',{ direction: 'right', amount: 10,  id: currentId.value })
  // })
  // useHotKey('shift+down',()=>{
  //     store.commit('moveComponent',{ direction: 'down', amount: 10,  id: currentId.value })
  // })

  const operations = DataOperation(currentId);
  useHotKeyExtra("ctrl+c, command+c", () => {
    operations.copy();
  });
  useHotKeyExtra("backspace, delete", () => {
    operations.delete();
  });
  useHotKeyExtra("ctrl+v, command+v", (event) => {
    operations.paste();
  });
  useHotKeyExtra("esc", () => {
    operations.cancel();
  });
  useHotKeyExtra("ctrl+z, command+z", () => {
    operations.undo();
  });
  useHotKeyExtra("ctrl+shift+z, command+shift+z", () => {
    operations.redo();
  });
  useHotKeyExtra("up", () => {
    operations.move("Up", 1);
  });
  useHotKeyExtra("down", () => {
    operations.move("Down", 1);
  });
  useHotKeyExtra("left", () => {
    operations.move("Left", 1);
  });
  useHotKeyExtra("right", () => {
    operations.move("Right", 1);
  });
  useHotKeyExtra("shift+up", () => {
    operations.move("Up", 10);
  });
  useHotKeyExtra("shift+down", () => {
    operations.move("Down", 10);
  });
  useHotKeyExtra("shift+left", () => {
    operations.move("Left", 10);
  });
  useHotKeyExtra("shift+right", () => {
    operations.move("Right", 10);
  });
}
